<template>
  <div class="">
    <div>
      <topNav />
    </div>
    <div class="container">
      <div class="top-img">
        <img src="../../static/entry.png" alt="" />
      </div>
      <el-divider></el-divider>
      <!-- 类型 -->
      <div class="types">
        <div class="item" v-for="(item, index) in list" :key="index">{{ item }}</div>
      </div>
      <!-- 申请报名入驻 -->
      <div style="text-align:center; margin-top: 7%; color: #ff0000;
      font-size: 0.2rem; font-weight: 550;">申请报名入驻</div>
      <div class="input">
        <input type="text" placeholder="姓名" v-model="name">
        <input type="text" placeholder="联系电话" v-model.number="tel">
        <input type="text" placeholder="所在地区" v-model="city">
        <input type="text" placeholder="主要产品名称" v-model="product">
      </div>
      <div class="entry">申请入驻</div>
    </div>
    <div>
      <bottom />
    </div>
  </div>
</template>

<script>
import topNav from "../components/topNav.vue";
import bottom from "../components/bottom.vue"
export default {
  components: {
    topNav,
    bottom
  },
  data() {
    return {
      list: [
        "专属客服",
        "运营推广",
        "司法援助服务",
        "风控协助",
        "订单长期扶持计划",
        "融资服务",
        "保险理赔服务",
        "商品采购",
        "物流服务",
      ],
      name: '',
      tel: '',
      city: '',
      product: ''
    };
  },
  methods: {},
};
</script>
<style scoped>
.container {
  position: relative;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.1rem;
  margin-top: 1%;
  padding-bottom: 15%;
}
.top-img {
  padding: 3% 0 0 3%;
}
.top-img img {
  width: 30%;
}
.types {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 0 5%;
}
.item {
  box-sizing: border-box;
  width: 19%;
  margin: 1% 1% 0 0;
  box-shadow: 0.05rem 0.06rem 0.07rem rgba(229, 0, 18, .2);
  background-color: rgb(229, 0, 18);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 0.2rem;
  line-height: 0.26rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: wrap;
  padding: 7% 4%;
  box-sizing: border-box;
}
.input {
  margin-top: 5%;
}
.input input {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  outline: none;
  background-color: #eee;
  margin-top: 2%;
  text-align: center;
  color: #999;
  border: 1px solid #eee;
  border-radius: 0.04rem;
}
.entry {
  margin-top: 3%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  padding: 0.6% 7%;
  background-color: rgb(229, 0, 18);
  color: #fff;
  border-radius: 0.04rem;
}
</style>